<template>
    <div class="login">
        <div class="navi">
             <van-nav-bar 
        left-arrow
        @click-left="goTo"

        @click-right="showPopup" 
       >

        <template #right>
                 <div class="">
           
              注册
            
          </div>
            </template>


             </van-nav-bar>
        </div>
        <div class="login-info">
            <div class="info-center">
                <h1>登录</h1>
                <!-- <span>与百万创作人以前成长</span> -->
            </div>
            
            
      <div class="form-box">
        <van-form>
          <van-field
            v-model="loginUserInfo.phone"
            name="手机号"
            label="手机号"
            placeholder="请输入手机号"
           autocomplete="off"
          />
          <van-field
            v-model="loginUserInfo.password"
            :type="!isOpenLogin ? 'password' : 'text'"
            name="密码"
            label="密码"
            placeholder="请输入密码"
            :right-icon="!isOpenLogin ? 'closed-eye' : 'eye-o'"
            autocomplete="off"
            @click-right-icon="toggleLoginPasssword"
          />
          <div class="forgot">
            <div class="forgot-pwd">忘记密码？</div>
          </div>
          <div class="login-btn">
            <van-button round block color="#71C698" @click="login"
              >登录</van-button
            >
          </div>
           <!-- <div class="login-btn">
            <van-button round block type="default" @click="showPopup"
              >注册</van-button
            >
          </div> -->
        </van-form>
      </div>
    </div>

        <!-- 注册 -->
        <van-popup v-model="show" position="bottom" closeable>
        <div class="register-box">
            <div class="register-title">
            注册
            </div>
            <van-form>

            <van-field
                v-model="registerUserInfo.nickName"
                type="text"
                name="昵称"
                label="昵称"
                placeholder="请输入昵称"
                autocomplete="off"
            />
            <van-field
                v-model="registerUserInfo.phone"
                name="手机号"
                label="手机号"
                placeholder="手机号"
                autocomplete="off"
            />
            <van-field
                v-model="registerUserInfo.password"
                :type="!isOpenRegister ? 'password' : 'text'"
                name="密码"
                label="密码"
                placeholder="密码"
                :right-icon="!isOpenRegister ? 'closed-eye' : 'eye-o'"
                autocomplete="off"
                @click-right-icon="toggleResgiterPasssword"
            />
            
            
            <div class="login-btn">
                <van-button round block color="#71C698" @click="register"
                >注册</van-button
                >
            </div>

            </van-form>
        </div>
        </van-popup>
    </div>
</template>

<script>
import { Toast } from 'vant';

    export default {
        name:"Login",
        components:{
            
        },
        data(){
            return{
                // username:'',
                // password:'',
                 //是否显示注册弹窗
                show: false,
                loginUserInfo: {
                    phone: '',
                    password: ''
                },
                registerUserInfo: {
                    phone: '',
                    password: '',
                    nickName: '',
                },
                isFture:false,

                //查看注册密码
                isOpenRegister: false,

                //查看登录密码
                isOpenLogin: false,
                }
        },
        methods:{
            isLogin(){
                this.$toast("登录成功");
                let obj ={
                    isLogin:true,
                    username:this.username,
                    password:this.password
                }
                localStorage.setItem("toke",JSON.stringify(obj));
                setTimeout(() => {
                    this.$router.back();
                }, 1000)
            },
             showPopup() {
                this.show = !this.show;
            },

            goTo(){
                this.$router.back()
            },

            //查看首页
            goPage(name) {
            this.$router.push({name});
            },

            //切换注册密码可见状态
            toggleResgiterPasssword() {
            this.isOpenRegister = !this.isOpenRegister;
            },

            //切换登录密码可见状态
            toggleLoginPasssword() {
            this.isOpenLogin = !this.isOpenLogin;
            },

            register() {
                if(this.registerUserInfo.phone != '' && this.registerUserInfo.password != '' && this.registerUserInfo.nickName != ''){
                    this.$toast.success("注册成功")
                    let obj = {isFure:this.isFture,arr:this.registerUserInfo}
                    localStorage.setItem("toke",JSON.stringify(obj));
                    this.show = false;
                }else{
                    this.$toast.fail("操作有误请重新输入")
                }
            },
            
            login() {
                let login = JSON.parse(localStorage.getItem("toke"));
                if(login===null){
                   Toast("请先注册再登陆")
                   return
                }else{
                   let arr = login.arr;
                
                
                if(login != undefined){
                    
                    if(login.arr.phone === this.loginUserInfo.phone && login.arr.password === this.loginUserInfo.password){
                        this.$toast.success("登录成功");
                        this.isFture = true;
                        let obj = {isFure:this.isFture,arr}
                       
                        localStorage.setItem("toke",JSON.stringify(obj));
                        setTimeout(() => {
                            this.$router.back();
                        }, 1000)
                    }else{
                        this.$toast.fail("输入有误请重新输入");
                    }
                }
                else{
                    this.$dialog.alert({
                        message: '该账号还没注册,请先注册',
                    })
                }
                }
               
            }
        }
    }
</script>

<style lang="less" scoped>
/deep/.van-tabs__line{
    width: 0px;
}
/deep/ .van-nav-bar .van-icon{
    color: black;
}
.login{
    .login-info{
        .info-center{
            padding: 10px;
        }
        .login{
            padding-top: 50px;
        }
        .btn{
            padding-top: 15px;
        }
        .forgot{
            padding: 10px;
            display: flex;
            .forgot-pwd{
                margin-left: auto;
            }
        }
        .login-btn{
            padding: 0px 10px;
        }
    }
}
.login {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #fff;
  .register-title{
    font-size: 24px;
    margin-bottom: 20px;
  }
  .register-box{
    padding: 10px;
  }
  .forgot{
    margin-top: 20px;
    display: flex;
  }
  .forgot-pwd{
    margin-left: auto;
    font-size: 14px;
    color: #666;
  }
  .login-btn{
    margin-top: 30px;
  }
  .form-box{
    margin-top: 50px;
  }
  .welcome-title {
    font-size: 30px;
  }
  .welcome-subtitle {
    font-size: 18px;
    margin-top: 20px;
    color: #999;
  }
  .login-box {
    margin-top: 80px;
    padding: 10px;
  }
  .home-text {
    color: #0c34ba;
    font-weight: bold;
    font-size: 14px;
  }
  .left-box {
    display: flex;
    align-items: center;
  }
  .logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
  }
  .logo-text {
    margin-left: 10px;
    font-weight: bold;
    font-size: 14px;
  }
}

</style>